<template>
	<view class='person_box'>
		<view class="header">
			<image src="@/static/baizuo.png" mode="" style="width: 45upx;height: 45upx;" @click="back"></image>
			<text style="font-size: 36upx;margin-left: 30upx;color: #fff;">{{shopTitle}}</text>
		</view>
		<view class="person_top across">
			<view class="vertical avatar_box">
				<image :src='info.logo' style="height: 150upx;width: 150upx;border-radius: 50%;" @click="previewImg">
				</image>
				<view class="shop_name">{{info.shop_name}}</view>
			</view>
			<view v-if="info.is_follow==0" class='follow' @click="addfollow" v-show="shop_id != usefo.shop_id">
				+关注
			</view>
			<view v-else class='follow' @click="reduceFollow" style="background-color: #242730;">
				已关注
			</view>
			<view class="sixin" @click="tosixin(info.toid,info.uid)" v-if="shop_id != usefo.shop_id">
				<image src="../../../static/xiaoxi.png" mode="" style="width: 38upx;height: 36upx;"></image>
				<text style="color: #FFFFFF;padding-left: 10upx;">私信</text>
			</view>
		</view>
		<view class="person_center">
			<view class="info_box across">
				<view class="address">
					{{info.shengshiqu}}{{info.address}}
				</view>
				<view class="across handle">
					<image @click="open" src='../../../static/images/img/nav.png'></image>
					<image @click="openTel" src="../../../static/images/img/phone.png"></image>
				</view>
			</view>
			<view class="desc_box">
				{{info.shop_desc}}
			</view>
			<view class="nums_box across">

				<view class='across'>
					<view class='bold'>{{info.followme_num}}</view>
					<view>粉丝</view>
				</view>
				<view class='across'>
					<view class='bold'>{{info.videoplay_num}}</view>
					<view>播放量</view>
				</view>
			</view>
			<view class="hint_box across">
				<view class="across">
					<view class="img_box">
						<image src="../../../static/zhanhui/wenj.png" mode=""></image>
					</view>
					<view class="vertical" @click="ziliao">
						<view class='title'>宣传资料</view>
						<view>下载资料</view>
					</view>
				</view>
				<view class="across">
					<view class="img_box">
						<image src="../../../static/images/img/car.png" mode=""></image>
					</view>
					<view class="vertical" @click="navWindowcase">
						<view class='title'>商品橱窗</view>
						<view>{{info.totalshop_num.goods_num}}件商品</view>
					</view>
				</view>
				<view class="across" @click="openZhi" v-if="zhilist.length>0">
					<view class="img_box">
						<!-- <image src="../../../static/images/shop_active.png" mode=""></image> -->
						<image src="../../../static/zhiwei.png" mode=""></image>
					</view>
					<!-- @click="navShopActive" -->
					<view class="vertical">
						<!-- <view class='title'>商家活动</view>
						<view>优惠大酬宾</view> -->
						<view class='title'>招聘职位</view>
						<view>{{zhilist.length}}个</view>
					</view>
				</view>
				<view class="across" v-if='info.alivetime !=""' @click="navLive">
					<view class="img_box">
						<image src="../../../static/images/img/live_icon.png" mode=""></image>
					</view>
					<view class="vertical">
						<view class='title'>直播动态</view>
						<view>{{info.alivetime}}开播</view>
					</view>
				</view>
			</view>
		</view>
		<view class="works">
			<view class="hint">
				作品 {{works_num}}
			</view>
			<scroll-view scroll-y="" class="works_center" @scrolltolower='bottomScroll' v-if="works.length>0">
				<view class="works_box">
					<view v-for="(item,index) in works" :index="index">
						<view class='item' @click="navPlayer(shop_id,index)" style="margin-top: 10upx;">
							<image :src='item.cover_img'></image>
							<text class="title">{{item.title}}</text>
						</view>
					</view>
				</view>
			</scroll-view>
			<view style="width: 100%;height: 400upx;display: flex;justify-content: center;align-items: center;" v-else>
				<image src="@/static/dixia.png" mode="" style="width: 280upx;height: 280upx;"></image>
			</view>
		</view>
		<view class="popup_box">
			<uni-popup ref="popup" type="bottom">
				<view class='center'>
					<view class='content' @click="openMap">腾讯地图</view>
					<view class="cancel" @click="cencel">取消</view>
				</view>
			</uni-popup>
			<uni-popup ref="tel" type="bottom">
				<view class='center'>
					<view class='content' @click="callTel">{{info.telephone}}</view>
					<view class="cancel" @click="cencelTel">取消</view>
				</view>
			</uni-popup>
			<uni-popup ref="complaint" type="bottom">
				<view class='center'>
					<view class='content' @click="callTel">{{info.telephone}}</view>
					<view class="cancel" @click="cencelTel">提交</view>
				</view>
			</uni-popup>
			<uni-popup ref="zhiwei" type="bottom">
				<view class='zhiweis' v-if="isShow" style="position: relative;">
					<scroll-view scroll-y="true"
						style="width: 100%;background-color: #FFFFFF;height: 880upx;border-top-left-radius: 15px;  border-top-right-radius: 15px;">
						<div
							style="display: flex;flex-direction: row;align-items: center;position: fixed;background-color: #fff;justify-content: flex-end;width: 100%;">
							<text style="font-size: 15px;padding-right: 260upx;">招聘职位</text>
							<image src="@/static/closed.png" mode="" style="width: 38upx;height: 38upx;padding-right: 50upx;" @click="cencelZhi"></image>
						</div>
						<div class="zhilist" v-for="(item,index) in zhilist" :key="index"
							@click.stop.prevent="zhidetail(item.id)" style="padding-top: 42px;">
							<div
								style="flex-direction: row;justify-content: space-between;align-items: center;display: flex;">
								<view class="">
									<text>{{item.job_name}}</text>
									<text
										style="width: 60upx;height: 36upx;font-size: 24upx;background-color: #2687FF;color: #fff;display: inline-block;text-align: center;line-height: 36upx;margin-left: 17upx;border-radius: 5upx;"
										v-if="zlist.job_type==1">校招</text>
									<text v-else
										style="width: 60upx;height: 36upx;font-size: 24upx;background-color: #FFC600;color: #fff;display: inline-block;text-align: center;line-height: 36upx;margin-left: 17upx;border-radius: 5upx;">社招</text>
								</view>
								<text style="font-weight: normal;">{{item.min_salary}}k-{{item.max_salary}}k</text>
							</div>
							<div class="zhong"
								style="padding: 15upx;flex-direction: row;align-items: center;padding-top: 30upx;padding-left: 0;">
								<div
									style="width: 140upx;height: 50upx;background: #F5F5F5;;border-radius: 15upx;line-height: 50upx;text-align: center;">
									<text style="color: #666;font-size: 26upx;line-height: 50upx;">{{item.year}}</text>
								</div>

							</div>
							<div
								style="flex-direction: row;justify-content: space-between;align-items: center;display: flex;padding: 20upx 0;">
								<text style="font-size: 28upx;color: #999999;">{{item.work_address}}</text>
								<div style="background-color: #F5F5F5;;width: 140upx;border-radius: 15upx;color: #999999;text-align: center;padding: 10upx;height: 60upx;"
									v-if="item.is_send==1">
									<text style="color: #999999;text-align: center;line-height: 60upx;">已投递</text>
								</div>
								<div style="background-color: #FF3D3D;width: 110upx;border-radius: 15upx;color: #FFFFFF;text-align: center;padding: 10upx;height: 50upx;"
									v-else>
									<text style="color: #fff;text-align: center;line-height: 50upx;"
										@click.stop.prevent="toudi(item,index)">投递</text>
								</div>
							</div>
						</div>

					</scroll-view>

				</view>
				<div v-else style="background-color: #fff;padding: 30upx 0;">
					<div style="display: flex;flex-direction: row;align-items: center;padding-left: 30upx;">
						<image src="../../../static/zuo.png" mode="" style="width: 50upx;height: 50upx;"
							@click="isShow=true"></image>
						<text style="margin-left: 125px;">职位详情</text>
					</div>
					<div class="zhilist" style="border: none;margin-top: 30upx;">
						<div
							style="flex-direction: row;justify-content: space-between;align-items: center;display: flex;">
							<view class="">
								<text>{{zlist.job_name}}</text>
								<text
									style="width: 60upx;height: 36upx;font-size: 24upx;background-color: #2687FF;color: #fff;display: inline-block;text-align: center;line-height: 36upx;margin-left: 17upx;"
									v-if="zlist.job_type==1">校招</text>
								<text v-else
									style="width: 60upx;height: 36upx;font-size: 24upx;background-color: #FFC600;color: #fff;display: inline-block;text-align: center;line-height: 36upx;margin-left: 17upx;">社招</text>
							</view>
							<text style="font-weight: normal;">{{zlist.min_salary}}k-{{zlist.max_salary}}k</text>
						</div>
						<div class="zhong"
							style="padding: 15upx;flex-direction: row;align-items: center;display: flex;padding-left: 0;">
							<div style="flex-direction: row;display: flex;text-align: center;">
								<text
									style="color: #999999;font-size: 26upx;text-align: center;line-height: 50upx;">{{zlist.work_address}}</text>
							</div>
							<div style="flex-direction: row;display: flex;text-align: center;padding-left: 30upx;">
								<text
									style="color: #999999;font-size: 26upx;text-align: center;line-height: 50upx;">{{zlist.year}}</text>
							</div>
						</div>
						<div style="flex-direction: column;justify-content: center;align-items: flex-start;">
							<text>职位类型</text>
							<div
								style="width: 140upx;height: 50upx;background: #F5F5F5;border-radius: 15upx;line-height: 50upx;text-align: center;margin-top: 30upx;">
								<text
									style="color: #666666;font-size: 26upx;line-height: 50upx;">{{zlist.jobtype_name}}</text>
							</div>
						</div>
						<div
							style="flex-direction: column;justify-content: center;align-items: flex-start;margin-top: 50upx;padding-bottom: 40upx;display: flex;">
							<text>职位描述：</text>
							<text style="padding: 20upx;padding-left: 0;">
								{{zlist.desc}}
							</text>
						</div>
						<div style="background-color: #F5F5F5 ;width: 600upx;border-radius: 15upx;color: #999999;text-align: center;height: 88upx;margin: 0 auto;margin-left: 30upx;"
							v-if="zlist.is_send==1">
							<text style="color: #fff;text-align: center;line-height: 88upx;">已投递</text>
						</div>
						<div style="background-color: #FF3D3D;width: 600upx;border-radius: 15upx;color: #FFFFFF;text-align: center;height: 88upx;margin: 0 auto;margin-left: 30upx;"
							@click="toudi(zlist)" v-else>
							<text style="color: #fff;text-align: center;line-height: 88upx;">投递</text>
						</div>
					</div>
				</div>

			</uni-popup>
			<complanit ref="complanit"></complanit>
		</view>
	</view>
</template>

<script>
	import worksItem from '../../../components/video/worksItem.vue'
	import avatar from '../../../components/avatar.vue'
	import complanit from '../../../components/complaint.vue'
	import {
		uniPopup
	} from '@dcloudio/uni-ui'
	export default {
		data() {
			return {
				isShow: true,
				zhilist: [],
				info: {
					shop_name: '',
					totalshop_num: {
						goods_num: ''
					},
					shengshiqu: '',
					address: '',
					shop_desc: '',
					alivetime: ''
				},
				works: [],
				works_num: '',
				clickLoading: false,
				shop_id: '',
				page: 1,
				zlist: {},
				isUpdate: true,
				usefo: {},
				shopTitle: '商家主页'
			}
		},
		components: {
			avatar,
			worksItem,
			complanit
		},
		mounted() {
			this.userInfo = this.$store.getters.getuserInfo
		},
		onshow() {
			this.initData(this.shop_id)
		},
		onLoad(options) {
			try {
				const value = uni.getStorageSync('userInfo');
				if (value) {
					console.log(value, "valsdadasd")
					this.usefo = JSON.parse(value)
					var userinfo = this.usefo
				} else {}
			} catch (e) {
				// error
			}
			console.log(userinfo, "666666666666")
			this.circle_id = options.circle_id
			this.shop_id = options.userId
			this.typename = options.typename
			this.initData(options.userId)
			if (userinfo == "undefined") {
				uni.request({
					url: 'https://dsx.cdzer.com/api/Job/getshopjob', //仅为示例，并非真实接口地址。
					method: 'POST',
					data: {
						uid: userinfo.id,
						shop_id: this.shop_id
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded',
					},
					success: (res) => {
						console.log(res.data.data, "招聘职位列表")
						this.zhilist = res.data.data
					}
				});
			} else {
				uni.request({
					url: 'https://dsx.cdzer.com/api/Job/getshopjob', //仅为示例，并非真实接口地址。
					method: 'POST',
					data: {
						uid: '',
						shop_id: this.shop_id
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded',
					},
					success: (res) => {
						console.log(res.data.data, "招聘职位列表")
						this.zhilist = res.data.data
					}
				});
			}

		},
		methods: {
			tosixin(id, to_uid) {
				console.log(JSON.stringify(this.usefo) !== '{}', "查看状态")
				if (JSON.stringify(this.usefo) !== '{}') {
					if (this.usefo.status == 400) {
						uni.navigateTo({
							url: '/pagesB/login/login'
						})
					} else {
						var name = this.info.shop_name
						var userId = this.info.uid
						uni.navigateTo({
							url: `/pages/businessSon/chat?toId=${id}&name=${name}&userId=${userId}&to_uid=${to_uid}`
						})
					}

				} else {
					uni.navigateTo({
						url: '/pagesB/login/login'
					})
				}

			},
			back() {
				console.log(this.typename,"this.typename")
				if(this.typename == "首页"){
					console.log(1111)
					uni.switchTab({
						url:'/pages/index/index'
					})
				}else{
					uni.navigateBack({
						delta: 1
					})
				}
				
			},
			previewImg(logourl) {
				let _this = this;
				let imgsArray = [];
				imgsArray[0] = _this.info.logo
				uni.previewImage({
					current: 0,
					urls: imgsArray
				});
			},
			toudi(item, index) {
				console.log(this.usefo, "this.usefothis.usefo")
				if (JSON.stringify(this.usefo) == '{}') {
					uni.showModal({
					
						title: '提示',
					
						content: "你还未登录，是否前往登录页面",
					
						success: function(res) {
					
							if (res.confirm) {
								console.log('用户点击确定');
								uni.navigateTo({
									url: '/pagesB/login/login'
								})
							} else if (res.cancel) {
					
								console.log('用户点击取消');
					
							}
					
						}
					
					});
				} else {
					console.log(item, this.usefo, "投递")
					uni.request({
						url: 'http://dsx.cdzer.com/api/Job/apply_job', //仅为示例，并非真实接口地址。
						method: 'POST',
						data: {
							job_id: item.id,
							shop_id: this.shop_id,
							uid: this.usefo.id
						},
						header: {
							'content-type': 'application/x-www-form-urlencoded',
						},
						success: (res) => {
							console.log(res, "投递")
							if (res.data.status == 200) {

								uni.showToast({
									title: res.data.mess,
									icon: 'none'
								})
								this.zhilist[index].is_send = 1
							} else {
								uni.showToast({
									title: res.data.mess,
									icon: 'none'
								})
							}
						}
					});
				}

			},
			zhidetail(id) {
				// let userinfo = JSON.parse(this.usefo)
				uni.request({
					url: 'https://dsx.cdzer.com/api/Job/job_details', //仅为示例，并非真实接口地址。
					method: 'POST',
					data: {
						job_id: id,
						uid: this.usefo.id
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded',
					},
					success: (res) => {
						console.log(res.data.data, "招聘职位列表")
						this.zlist = res.data.data
						this.isShow = false
					}
				});
			},
			ziliao() {
				uni.navigateTo({
					url: `../../ziliao?shopId=${this.shop_id }`
				})
			},
			navPlayer(id, index) {
				var shipin = JSON.stringify(this.works)
				var useid = this.usefo.id
				var typesd = 3
				var typed = 0
				this.$store.commit('setPlayList', this.works)
				console.log(this.$store)
				uni.navigateTo({
					url: '../../home/shopPlyer/shopPlyer?shpo_id=' + id + '&index=' + index + '&page=' + this
						.page + '&shipin=' + shipin + '&useid=' + useid + '&typew=' + typesd+ '&typed=' + typed
				})
			},
			bottomScroll() {
				if (!this.isUpdate) return
				this.page++
				this.initCenter(this.shop_id)
			},
			initCenter(shop_id) {
				this.isUpdate = false
				this.$http.shop_video({
					shop_id,
					page: this.page,
				}).then(res => {
					if (res.status == 200) {
						this.works = this.works.concat(res.data.video_list)
						this.works_num = res.data.toal_num
						if (res.data.length == 0) {
							this.page = --this.page
							this.loadingType = 2
						}
						// ++this.page

						this.isUpdate = true
					}
				})
			},
			initData(shop_id) {
				if (JSON.stringify(this.usefo) == '{}') {
					this.$http.shop_info({
						shop_id,
					}).then(res => {
						console.log(res)
						if (res.status == 200) {
							this.info = res.data
							this.shopTitle = this.info.shop_name
							uni.setNavigationBarTitle({
								title: this.info.shop_name
							})
						}
					}).catch(err => {

					})
				} else {
					console.log(this.usefo, "this.usefo")
					// let uid = JSON.parse(this.usefo).id
					this.$http.shop_info({
						shop_id,
						uid: this.usefo.id
					}).then(res => {
						console.log(res)
						if (res.status == 200) {
							this.info = res.data
							this.shopTitle = this.info.shop_name
							uni.setNavigationBarTitle({
								title: this.info.shop_name
							})
						}
					}).catch(err => {

					})
				}

				this.initCenter(shop_id)

			},
			openMap() {

				const latitude = parseFloat(this.info.lat)
				const longitude = parseFloat(this.info.lng)
				console.log(latitude, longitude)
				wx.openLocation({
					latitude,
					longitude,
					scale: 18
				})

			},
			callTel() {
				uni.makePhoneCall({
					phoneNumber: this.info.telephone
				})
			},
			open() {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open('bottom')
			},
			openTel() {
				this.$refs.tel.open('bottom')
			},

			cencel() {
				this.$refs.popup.close()
			},
			cencelTel() {
				this.$refs.tel.close()
			},
			openZhi() {
				if (this.zhilist.length > 0) {
					this.$refs.zhiwei.open('bottom')
				} else {
					uni.showToast({
						title: '暂未发布职位',
						icon: 'none'
					})
				}
			},
			cencelZhi() {
				this.$refs.zhiwei.close()
			},
			navLive() {
				uni.navigateTo({
					url: '../LiveDynamic/LiveDynamic?id=' + this.info.id
				})
			},
			navShopActive() {
				uni.navigateTo({
					url: '../shopActive/shopActive?id=' + this.info.id
				})
			},
			navWindowcase() {
				console.log('触发')
				var tou = JSON.stringify(this.info.logo)
				uni.navigateTo({
					url: `../../home/showcase/showcase?id=${this.info.id}&name=${this.info.shop_name}&num=${this.info.totalshop_num.sell_total_num}&tou=${tou}`
				})
			},
			openplanit() {
				this.$refs.complanit.open()
			},
			addfollow() {
				console.log(JSON.stringify(this.usefo), "this.usefothis.usefo")
				if (JSON.stringify(this.usefo) !== '{}') {
					if (this.usefo.status == 400) {
						uni.navigateTo({
							url: '/pagesB/login/login'
						})
					} else {
						this.clickLoading = true
						let shop_id = this.info.id
						let br_uid = this.info.uid
						let uid = this.usefo.id
						uni.request({
							url: 'https://dsx.cdzer.com/api/CollShops/coll', //仅为示例，并非真实接口地址。
							data: {
								br_uid,
								shop_id,
								uid
							},
							method: 'POST',
							header: {
								'content-type': 'application/x-www-form-urlencoded',
							},
							success: (res) => {
								console.log(res.data, "关注关注", this.token)
								if (res.data.status == 200) {
									this.info.is_follow = 1
									uni.showToast({
										title: res.mess
									})
								} else {
									uni.showToast({
										title: res.mess,
										icon: 'none'
									})
								}
								this.clickLoading = false
							}
						});
					}

				} else {
					uni.navigateTo({
						url: '/pagesB/login/login'
					})
				}

			},
			reduceFollow() {
				if (JSON.stringify(this.usefo) !== '{}') {
					this.clickLoading = true
					let shop_id = this.info.id
					let br_uid = this.info.uid
					let uid = this.usefo.id
					uni.request({
						url: 'https://dsx.cdzer.com/api/CollShops/cancelcoll', //仅为示例，并非真实接口地址。
						data: {
							br_uid,
							shop_id,
							uid
						},
						method: 'POST',
						header: {
							'content-type': 'application/x-www-form-urlencoded',
						},
						success: (res) => {
							console.log(res.data, "关注关注", this.token)
							if (res.data.status == 200) {
								this.info.is_follow = 0
								console.log('取消')
								uni.showToast({
									title: '取关成功',
									icon: 'none'
								})

							}
							this.clickLoading = false
						}
					});
				} else {
					uni.navigateTo({
						url: '/pagesB/login/login'
					})
				}

			},

		}
	}
</script>

<style lang='less'>
	.sixin {
		width: 170upx;
		height: 74upx;
		background-color: rgb(36, 39, 48);
		border-radius: 10upx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.header {
		position: fixed;
		background-color: #000000;
		height: 110upx;
		width: 100%;
		top: 0;
		left: 0;
		display: flex;
		z-index: 100;
		align-items: center;
		padding-left: 30upx;
	}

	.zhilist {
		padding: 30upx;
		border-bottom: 2upx solid #EEEEEE;
	}

	.across {
		display: flex;
	}

	.vertical {
		display: flex;
		flex-direction: column;
	}

	.person_box {
		background-color: rgba(0, 0, 0);
		width: 100vw;
		height: 100vh;
		overflow: scroll;

		.person_top {
			align-items: center;
			width: 94vw;
			justify-content: space-between;
			padding: 20rpx 0;
			margin: 15vw 3vw;
			color: #fff;
		}

		.person_top {
			.avatar_box {
				position: relative;

				view {
					font-size: 36rpx;
				}

				.shop_name {
					position: absolute;
					bottom: -58rpx;
					white-space: nowrap;
				}
			}

			.follow {
				width: 48vw;
				height: 74rpx;
				background-color: #ff3d3d;
				border-radius: 10rpx;
				text-align: center;
				line-height: 74rpx;
			}

			.more_btn {
				width: 74rpx;
				height: 74rpx;
				background-color: #242730;
				border-radius: 10rpx;

				image {
					margin-left: 15rpx;
					margin-top: 33rpx;
					width: 44rpx;
					height: 8rpx;
				}
			}
		}

		.person_center {
			margin: 60rpx 3vw;
			width: 94vw;
			height: 340rpx;

			.info_box {
				height: 88rpx;
				width: 94vw;
				color: #fff;
				padding: 0 15rpx;
				background-color: #242730;
				border-radius: 10rpx;
				justify-content: space-between;
				align-items: center;

				view {
					width: 60%;
					overflow: hidden;
					white-space: nowrap;
					line-height: 88rpx;
					text-overflow: ellipsis;
					font-size: 30rpx;
				}

				image {
					width: 34rpx;
					height: 34rpx;
				}

				.handle {
					width: 20vw;
					justify-content: space-around;
				}
			}

			.desc_box {
				width: 94vw;
				font-size: 30rpx;
				height: 81px;
				color: #ffffff;
				margin-top: 40rpx;
				line-height: 50rpx;
				letter-spacing: 2rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 4;
				-webkit-box-orient: vertical;
			}

			.nums_box {
				width: 34vw;
				justify-content: space-between;
				color: #999999;
				margin: 30rpx 0;
				font-size: 30rpx;

				.bold {
					color: #ffffff;
					margin-right: 5rpx;
				}
			}

			.hint_box {
				margin-top: 30rpx;
				width: 94vw;
				overflow-y: auto;
				justify-content: flex-start;

				.across {
					flex-shrink: 0;
					margin-right: 6vw;

					.img_box {
						width: 75rpx;
						height: 74rpx;
						background-color: #242730;
						border-radius: 10rpx;

						image {
							width: 34rpx;
							height: 32rpx;
							margin-left: 20rpx;
							margin-top: 21rpx;
						}
					}

					.vertical {
						font-size: 24rpx;
						margin-left: 10rpx;
						color: #999;

						.title {
							font-size: 30rpx;
							color: #fff;
						}
					}
				}
			}
		}

		.works {
			margin: 140rpx 3vw;
			width: 94vw;

			.hint {
				font-size: 30rpx;
				color: #fffefe;
			}

			.works_center {
				height: calc(100vh - 700rpx);

				.works_box {
					display: flex;
					flex-wrap: wrap;

					.item {
						margin-right: 0.9vw;
						position: relative;
						display: flex;
						flex-direction: column;

						.title {
							font-size: 30upx;
							width: 215upx;
							text-align: center;
							border-radius: 0px 0px 10upx 10upx;
							background-color: #242730;
							padding: 6upx;
							color: #fff;
							white-space: nowrap; //规定段落中的文本不进行换行
							text-overflow: ellipsis;
							overflow: hidden;
						}

						image {
							width: 30vw;
							height: 40vw;
						}

						view {
							position: relative;

						}

						.like_box {
							position: absolute;
							left: 15rpx;
							bottom: 60rpx;
							color: #fff;
							font-size: 24rpx;
							display: flex;
							align-items: center;

							image {
								width: 21rpx;
								height: 18rpx;
								z-index: 2;
								margin-right: 5rpx;
							}
						}
					}
				}


			}

		}

		.popup_box {
			.center {
				height: 276rpx;
				background-color: #f5f5f5;
				display: flex;
				justify-content: space-between;
				flex-direction: column;

				.content {
					height: 120rpx;
					text-align: center;
					line-height: 120rpx;
					font-size: 36rpx;
					border-top-right-radius: 15rpx;
					border-top-left-radius: 15rpx;
					background-color: #fff;
				}

				.cancel {
					line-height: 120rpx;
					height: 120rpx;
					text-align: center;
					font-size: 30rpx;
					background-color: #fff;
				}
			}
		}

		::-webkit-scrollbar {
			display: none
		}
	}
</style>
